import { Directive, HostListener, Renderer2, ElementRef, Input } from '@angular/core';
import {DragDropService} from "./drag-drop.service";
// todo 需要改动
@Directive({
  selector: '[app-droppable]'
})
export class DropDirective {

  @Input() dragEnterClass :string;
  @Input() dropTags :string[] = [];

  private data$;

  constructor(private el: ElementRef,
              private rd: Renderer2,
              private service:DragDropService) {
    this.data$ = this.service.getDragData().take(1);
  }

  // 进入
  @HostListener('dragenter',['$event'])
  onDragEnter(ev:Event){
    if(this.el.nativeElement === ev.target){
      this.rd.addClass(this.el.nativeElement,this.dragEnterClass)
    }

  }
  // 在上面
  @HostListener('dragover',['$event'])
  onDragOver(ev:Event){
    if(this.el.nativeElement === ev.target){

    }
  }
  // 离开
  @HostListener('dragleave',['$event'])
  onDragLeave(ev:Event){
    if(this.el.nativeElement === ev.target){
      this.rd.removeClass(this.el.nativeElement,this.dragEnterClass)
    }
  }
  // 离开
  @HostListener('drop',['$event'])
  onDrop(ev:Event){
    if(this.el.nativeElement === ev.target){
      this.rd.removeClass(this.el.nativeElement,this.dragEnterClass)
    }
  }

}
